import React from 'react';
import PropTypes from 'prop-types';
import { StarRating, Star } from './star/startRating.jsx';
import { Hidemessage } from './hiddenMessage/index';
import './color.css';

class Color extends React.Component {
  componentWillMount() {
    this.style = { background: "#eee" };
    this.msgState = false;
    this.message = "";
  }
  shouldComponentUpdate(nextProps) {
    const { rating } = this.props;
    // console.log('---------333-----------', rating, nextProps);
    return rating !== nextProps.rating;
  }
  
  componentWillUpdate(nextProps) {
    const { rating,title } = this.props;
    this.refs.title.style.backgroundColor = "red";
    this.refs.title.style.color = "white";
    this.style = null;
    this.msgstate = true;
    this.message = `${title}:rating ${rating} ->  ${nextProps.rating} `;
    // alert(`${title}:rating ${rating} ->  ${nextProps.rating} `);
  }
  componentDidUpdate(prevProps) {
    const { rating,title } = this.props;
    const status = (rating > prevProps.rating) ? 'better' : 'worse';
    this.refs.title.style.background = "";
    this.refs.title.style.color = "black";

    this.msgstate = false;
    this.message = "";
    //console.log(React.Children(this))
  }
  render() {
    const { title, id, color, rating, onRemove = f => f, onRate = f => f } = this.props;
    return <section className="colorSection" style={this.style}>
      <h1 style={{ color: title.color, background: title.backgroundColor }} ref="title">{title}</h1>
      <button onClick={onRemove}>x</button>
      <div className="color" style={{ background: color }} ref="color" ></div>
      <div>
        <StarRating startSeleted={rating} onRate={onRate} cId={id} />
      </div>
      <Hidemessage hidden={this.msgstate} message={this.message} />
    </section>
  }
}
Color.propTypes = {
  title: PropTypes.string,
  rating: PropTypes.number,
  color: PropTypes.string,
  onRate: PropTypes.func
}
Color.defaultProps = {
  title: undefined,
  rating: 0,
  color: '#000000',
  onRate: f => f
}
export default Color;